<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MeetUp 管理后台</title>

    {% load static %}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 保持原有的 CSS 样式不变 */
        :root {
            --sidebar-width: 250px;
            --header-height: 60px;
            --primary-color: #FF8C42;
            --secondary-color: #FFB347;
            --accent-color: #FFD166;
            --light-color: #f8f9fa;
            --dark-color: #2D3047;
            --text-color: #333333;
            --bg-color: #FFF9F2;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            overflow-x: hidden;
            color: var(--text-color);
            margin: 0;
            padding: 0;
        }

        #sidebar {
            width: var(--sidebar-width);
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            transition: all 0.3s;
            z-index: 1000;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
        }

        #sidebar .sidebar-header {
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        #sidebar .sidebar-header h3 {
            font-weight: 700;
            margin-bottom: 0;
            color: white;
        }

        #sidebar ul.components {
            padding: 20px 0;
            list-style: none;
        }

        #sidebar ul li a {
            padding: 12px 20px;
            color: rgba(255, 255, 255, 0.9);
            display: block;
            text-decoration: none;
            transition: all 0.3s;
            border-radius: 0 25px 25px 0;
            margin: 5px 10px;
        }

        #sidebar ul li a:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.2);
        }

        #sidebar ul li.active > a {
            color: white;
            background-color: rgba(255, 255, 255, 0.3);
            font-weight: 600;
        }

        #sidebar ul li a i {
            margin-right: 10px;
        }

        #content {
            width: calc(100% - var(--sidebar-width));
            margin-left: var(--sidebar-width);
            min-height: 100vh;
            transition: all 0.3s;
            background-color: var(--bg-color);
        }

        .navbar {
            height: var(--header-height);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            background-color: white;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.2s, box-shadow 0.2s;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: white;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background-color: white;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 15px 20px;
            font-weight: 600;
        }

        .stat-card {
            text-align: center;
            padding: 25px 15px;
            position: relative;
        }

        .stat-card i {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: var(--primary-color);
            background: rgba(255, 140, 66, 0.1);
            width: 70px;
            height: 70px;
            line-height: 70px;
            border-radius: 50%;
            display: inline-block;
        }

        .stat-card .number {
            font-size: 2.2rem;
            font-weight: bold;
            color: var(--dark-color);
            margin: 10px 0;
        }

        .stat-card .label {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.375rem;
        }

        .badge-published {
            background-color: var(--secondary-color);
        }

        .badge-pending {
            background-color: var(--accent-color);
            color: #212529;
        }

        .badge-draft {
            background-color: #6c757d;
        }

        .badge-cancelled {
            background-color: #dc3545;
        }

        .badge-completed {
            background-color: #17a2b8;
        }

        .badge-active {
            background-color: #28a745;
        }

        .badge-inactive {
            background-color: #6c757d;
        }

        .badge-staff {
            background-color: #007bff;
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            border-radius: 20px;
            padding: 8px 20px;
        }

        .btn-primary:hover {
            background-color: #FF7B2E;
            border-color: #FF7B2E;
        }

        h2 {
            color: var(--dark-color);
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

        .table th {
            border-top: none;
            font-weight: 600;
            color: var(--dark-color);
            background-color: #f8f9fa;
        }

        @media (max-width: 768px) {
            #sidebar {
                width: 80px;
                text-align: center;
            }

            #sidebar .sidebar-header h3,
            #sidebar ul li a span {
                display: none;
            }

            #sidebar ul li a i {
                margin-right: 0;
                font-size: 1.5rem;
            }

            #content {
                width: calc(100% - 80px);
                margin-left: 80px;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>城会玩管理后台</h3>
        </div>

        <ul class="list-unstyled components">
            <li class="{% if current_tab == 'dashboard' %}active{% endif %}">
{#      href="?tab=dashboard" data-section="dashboard"     修改点 #}
                <a href="?tab=dashboard" data-section="dashboard">
                    <i class="bi bi-speedometer2"></i>
                    <span>仪表盘</span>
                </a>
            </li>
            <li class="{% if current_tab == 'activities' %}active{% endif %}">
                <a href="?tab=activities" data-section="activities">
                    <i class="bi bi-calendar-event"></i>
                    <span>活动管理</span>
                </a>
            </li>
            <li class="{% if current_tab == 'users' %}active{% endif %}">
                <a href="?tab=users" data-section="users">
                    <i class="bi bi-people"></i>
                    <span>用户管理</span>
                </a>
            </li>
            <li class="{% if current_tab == 'categories' %}active{% endif %}">
                <a href="?tab=categories" data-section="categories">
                    <i class="bi bi-tags"></i>
                    <span>分类管理</span>
                </a>
            </li>
            <li class="{% if current_tab == 'statistics' %}active{% endif %}">
                <a href="?tab=statistics" data-section="statistics">
                    <i class="bi bi-bar-chart"></i>
                    <span>数据统计</span>
                </a>
            </li>

            <li class="{% if current_tab == 'violations' %}active{% endif %}">
                <a href="?tab=violations" data-section="violations">
                    <i class="bi bi-shield-exclamation"></i>
                    <span>违规言论管理</span>
                </a>
            </li>

            <!-- 在 admin_index.html 的侧边栏中添加 -->
            <li class="{% if current_tab == 'points' or current_tab == 'points_history' or current_tab == 'points_exchanges' %}active{% endif %}">
                <a href="#pointsSubmenu" data-bs-toggle="collapse" aria-expanded="{% if current_tab == 'points' or current_tab == 'points_history' or current_tab == 'points_exchanges' %}true{% else %}false{% endif %}" class="dropdown-toggle">
                    <i class="bi bi-coin"></i>
                    <span>积分管理</span>
                </a>
                <ul class="collapse list-unstyled {% if current_tab == 'points' or current_tab == 'points_history' or current_tab == 'points_exchanges' %}show{% endif %}" id="pointsSubmenu">
                    <li class="{% if current_tab == 'points' %}active{% endif %}">
                        <a href="{% url 'points_management' %}">
                            <i class="bi bi-box-seam"></i>
                            <span>积分商品</span>
                        </a>
                    </li>
                    <li class="{% if current_tab == 'points_history' %}active{% endif %}">
                        <a href="{% url 'points_history' %}">
                            <i class="bi bi-clock-history"></i>
                            <span>积分记录</span>
                        </a>
                    </li>
                    <li class="{% if current_tab == 'points_exchanges' %}active{% endif %}">
                        <a href="{% url 'points_exchanges' %}">
                            <i class="bi bi-arrow-left-right"></i>
                            <span>兑换记录</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    <!-- 主内容区 -->
    <div id="content">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand navbar-light bg-white">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-primary">
                    <i class="bi bi-list"></i>
                </button>

                <ul class="navbar-nav ms-auto">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> {{ request.user.username }}
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/user/person_center/"><i class="bi bi-person"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> 设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/user/logout/"><i class="bi bi-box-arrow-right"></i> 退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <!-- 页面内容 -->
        <div class="container-fluid p-4">
            <!-- 仪表盘 -->
            <div id="dashboard-section" class="content-section {% if current_tab != 'dashboard' %}d-none{% endif %}">
                <h2 class="mb-4">仪表盘</h2>

                <!-- 统计卡片 -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <i class="bi bi-calendar-check"></i>
                            <div class="number">{{ today_activities }}</div>
                            <div class="label">今日活动</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <i class="bi bi-people"></i>
                            <div class="number">{{ today_users }}</div>
                            <div class="label">今日注册用户</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <i class="bi bi-collection"></i>
                            <div class="number">{{ total_activities }}</div>
                            <div class="label">总活动数</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card">
                            <i class="bi bi-person"></i>
                            <div class="number">{{ total_users }}</div>
                            <div class="label">总用户数</div>
                        </div>
                    </div>
                </div>

                <!-- 最近活动列表 -->
                <div class="row mt-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">热门活动</h5>
                                <a href="?tab=activities" class="btn btn-sm btn-primary">查看全部</a>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>活动标题</th>
                                                <th>组织者</th>
                                                <th>分类</th>
                                                <th>参与人数</th>
                                                <th>状态</th>
                                                <th>开始时间</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for activity in popular_activities %}
                                            <tr>
                                                <td>{{ activity.title }}</td>
                                                <td>{{ activity.organizer.username }}</td>
                                                <td>{{ activity.category.name }}</td>
                                                <td>{{ activity.current_participants }}/{{ activity.max_participants }}</td>
                                                <td>
                                                    {% if activity.status == 'published' %}
                                                        <span class="badge badge-published">已发布</span>
                                                    {% elif activity.status == 'draft' %}
                                                        <span class="badge badge-draft">草稿</span>
                                                    {% elif activity.status == 'cancelled' %}
                                                        <span class="badge badge-cancelled">已取消</span>
                                                    {% elif activity.status == 'completed' %}
                                                        <span class="badge badge-completed">已完成</span>
                                                    {% elif activity.status == 'pending' %}
                                                        <span class="badge badge-pending">待审核</span>
                                                    {% endif %}
                                                </td>
                                                <td>{{ activity.start_time|date:"Y-m-d H:i" }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="6" class="text-center">暂无活动</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活动管理 -->
            <div id="activities-section" class="content-section {% if current_tab != 'activities' %}d-none{% endif %}">
                <h2 class="mb-4">活动管理</h2>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="card-body">
                        <form class="row g-3 search-form" method="get">
                            <input type="hidden" name="tab" value="activities">
                            <div class="col-md-4">
                                <input type="text" class="form-control search-box" name="activity_search"
                                       value="{{ activity_search }}" placeholder="搜索活动标题、描述、地点...">
                            </div>
                            <div class="col-md-3">
                                <select class="form-select status-select" name="activity_status_filter">
                                    <option value="">所有状态</option>
                                    <option value="published" {% if activity_status_filter == 'published' %}selected{% endif %}>已发布</option>
                                    <option value="draft" {% if activity_status_filter == 'draft' %}selected{% endif %}>草稿</option>
                                    <option value="pending" {% if activity_status_filter == 'pending' %}selected{% endif %}>待审核</option>
                                    <option value="cancelled" {% if activity_status_filter == 'cancelled' %}selected{% endif %}>已取消</option>
                                    <option value="completed" {% if activity_status_filter == 'completed' %}selected{% endif %}>已完成</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select class="form-select" name="activity_category">
                                    <option value="">所有分类</option>
                                    {% for category in categories %}
                                    <option value="{{ category.id }}" {% if activity_category == category.id|stringformat:"i" %}selected{% endif %}>
                                        {{ category.name }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <button type="submit" class="btn btn-primary w-100">搜索</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 活动列表 -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">活动列表</h5>
                        <span class="text-muted">共 {{ activities.paginator.count }} 个活动</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>活动标题</th>
                                        <th>组织者</th>
                                        <th>分类</th>
                                        <th>参与人数</th>
                                        <th>状态</th>
                                        <th>开始时间</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for activity in activities %}
                                    <tr>
                                        <td>{{ activity.title }}</td>
                                        <td>{{ activity.organizer.username }}</td>
                                        <td>{{ activity.category.name }}</td>
                                        <td>{{ activity.current_participants }}/{{ activity.max_participants }}</td>
                                        <td>
                                            {% if activity.status == 'published' %}
                                                <span class="badge badge-published">已发布</span>
                                            {% elif activity.status == 'draft' %}
                                                <span class="badge badge-draft">草稿</span>
                                            {% elif activity.status == 'cancelled' %}
                                                <span class="badge badge-cancelled">已取消</span>
                                            {% elif activity.status == 'completed' %}
                                                <span class="badge badge-completed">已完成</span>
                                            {% elif activity.status == 'pending' %}
                                                <span class="badge badge-pending">待审核</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ activity.start_time|date:"Y-m-d H:i" }}</td>
                                        <td>{{ activity.created_at|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                <!-- 添加查看详情按钮 -->
                                                <a href="{% url 'admin_activity_detail' activity.id %}" class="btn btn-outline-primary">
                                                    <i class="bi bi-eye"></i> 查看详情
                                                </a>
                                                {% if activity.status == 'pending' %}
                                                    <button type="button" class="btn btn-outline-success approve-activity-btn"
                                                            data-activity-id="{{ activity.id }}" data-title="{{ activity.title }}">
                                                        <i class="bi bi-check-lg"></i> 批准
                                                    </button>
                                                    <button type="button" class="btn btn-outline-warning reject-activity-btn"
                                                            data-activity-id="{{ activity.id }}" data-title="{{ activity.title }}">
                                                        <i class="bi bi-x-lg"></i> 拒绝
                                                    </button>
                                                {% endif %}
                                                <button type="button" class="btn btn-outline-danger delete-activity-btn"
                                                        data-activity-id="{{ activity.id }}" data-title="{{ activity.title }}">
                                                    <i class="bi bi-trash"></i> 删除
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="8" class="text-center">暂无活动</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        {% if activities.has_other_pages %}
                        <div class="pagination-container">
                            <nav>
                                <ul class="pagination">
                                    {% if activities.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?tab=activities&activity_page={{ activities.previous_page_number }}{% if activity_search %}&activity_search={{ activity_search }}{% endif %}{% if activity_status_filter %}&activity_status_filter={{ activity_status_filter }}{% endif %}{% if activity_category %}&activity_category={{ activity_category }}{% endif %}">上一页</a>
                                    </li>
                                    {% endif %}

                                    {% for i in activities.paginator.page_range %}
                                    <li class="page-item {% if activities.number == i %}active{% endif %}">
                                        <a class="page-link" href="?tab=activities&activity_page={{ i }}{% if activity_search %}&activity_search={{ activity_search }}{% endif %}{% if activity_status_filter %}&activity_status_filter={{ activity_status_filter }}{% endif %}{% if activity_category %}&activity_category={{ activity_category }}{% endif %}">{{ i }}</a>
                                    </li>
                                    {% endfor %}

                                    {% if activities.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?tab=activities&activity_page={{ activities.next_page_number }}{% if activity_search %}&activity_search={{ activity_search }}{% endif %}{% if activity_status_filter %}&activity_status_filter={{ activity_status_filter }}{% endif %}{% if activity_category %}&activity_category={{ activity_category }}{% endif %}">下一页</a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>


            <div id="violations-section" class="content-section {% if current_tab != 'violations' %}d-none{% endif %}">
    <h2 class="mb-4">违规言论管理</h2>

    <!-- 搜索和筛选 -->
    <div class="card">
        <div class="card-body">
            <form class="row g-3 search-form" method="get">
                <input type="hidden" name="tab" value="violations">
                <div class="col-md-3">
                    <input type="text" class="form-control search-box" name="violation_search"
                           value="{{ violation_search }}" placeholder="搜索举报内容...">
                </div>
                <div class="col-md-3">
                    <select class="form-select status-select" name="violation_status">
                        <option value="">所有状态</option>
                        <option value="pending" {% if violation_status == 'pending' %}selected{% endif %}>待审核</option>
                        <option value="approved" {% if violation_status == 'approved' %}selected{% endif %}>违规确认</option>
                        <option value="rejected" {% if violation_status == 'rejected' %}selected{% endif %}>举报无效</option>
                        <option value="processed" {% if violation_status == 'processed' %}selected{% endif %}>已处理</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-select" name="violation_type">
                        <option value="">所有类型</option>
                        <option value="private_message" {% if violation_type == 'private_message' %}selected{% endif %}>私信</option>
                        <option value="activity_discussion" {% if violation_type == 'activity_discussion' %}selected{% endif %}>活动讨论</option>
                        <option value="activity_review" {% if violation_type == 'activity_review' %}selected{% endif %}>活动评价</option>
                        <option value="discussion_comment" {% if violation_type == 'discussion_comment' %}selected{% endif %}>讨论评论</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100">搜索</button>
                </div>
            </form>
        </div>
    </div>
             <!-- 违规言论列表 -->
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">违规举报列表</h5>
            <span class="text-muted">共 {{ violations.paginator.count }} 条举报</span>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>举报人</th>
                            <th>被举报用户</th>
                            <th>举报类型</th>
                            <th>违规内容</th>
                            <th>举报理由</th>
                            <th>状态</th>
                            <th>举报时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for violation in violations %}
                        <tr>
                            <td>{{ violation.reporter.username }}</td>
                            <td>{{ violation.reported_user.username }}</td>
                            <td>{{ violation.get_report_type_display }}</td>
                            <td>
                                <div class="violation-content" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    {{ violation.content }}
                                </div>
                            </td>
                            <td>
                                <div class="violation-reason" style="max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                    {{ violation.reason }}
                                </div>
                            </td>
                            <td>
                                {% if violation.status == 'pending' %}
                                    <span class="badge badge-warning">待审核</span>
                                {% elif violation.status == 'approved' %}
                                    <span class="badge badge-danger">违规确认</span>
                                {% elif violation.status == 'rejected' %}
                                    <span class="badge badge-secondary">举报无效</span>
                                {% elif violation.status == 'processed' %}
                                    <span class="badge badge-success">已处理</span>
                                {% endif %}
                            </td>
                            <td>{{ violation.created_at|date:"Y-m-d H:i" }}</td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <button type="button" class="btn btn-outline-primary view-violation-btn"
                                            data-violation-id="{{ violation.id }}">
                                        <i class="bi bi-eye"></i> 查看详情
                                    </button>
                                    {% if violation.status == 'pending' %}
                                        <button type="button" class="btn btn-outline-success approve-violation-btn"
                                                data-violation-id="{{ violation.id }}">
                                            <i class="bi bi-check-lg"></i> 确认违规
                                        </button>
                                        <button type="button" class="btn btn-outline-warning reject-violation-btn"
                                                data-violation-id="{{ violation.id }}">
                                            <i class="bi bi-x-lg"></i> 举报无效
                                        </button>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="8" class="text-center">暂无违规举报</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        <!-- 分页 -->
            {% if violations.has_other_pages %}
            <div class="pagination-container">
                <nav>
                    <ul class="pagination">
                        {% if violations.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?tab=violations&violation_page={{ violations.previous_page_number }}{% if violation_search %}&violation_search={{ violation_search }}{% endif %}{% if violation_status %}&violation_status={{ violation_status }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}">上一页</a>
                        </li>
                        {% endif %}

                        {% for i in violations.paginator.page_range %}
                        <li class="page-item {% if violations.number == i %}active{% endif %}">
                            <a class="page-link" href="?tab=violations&violation_page={{ i }}{% if violation_search %}&violation_search={{ violation_search }}{% endif %}{% if violation_status %}&violation_status={{ violation_status }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}">{{ i }}</a>
                        </li>
                        {% endfor %}

                        {% if violations.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?tab=violations&violation_page={{ violations.next_page_number }}{% if violation_search %}&violation_search={{ violation_search }}{% endif %}{% if violation_status %}&violation_status={{ violation_status }}{% endif %}{% if violation_type %}&violation_type={{ violation_type }}{% endif %}">下一页</a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>
</div>

            <!-- 用户管理 -->
            <div id="users-section" class="content-section {% if current_tab != 'users' %}d-none{% endif %}">
                <h2 class="mb-4">用户管理</h2>

                <!-- 搜索和筛选 -->
                <div class="card">
                    <div class="card-body">
                        <form class="row g-3 search-form" method="get">
                            <input type="hidden" name="tab" value="users">
                            <div class="col-md-5">
                                <input type="text" class="form-control search-box" name="user_search"
                                       value="{{ user_search }}" placeholder="搜索用户名、邮箱、手机号...">
                            </div>
                            <div class="col-md-4">
                                <select class="form-select status-select" name="user_status">
                                    <option value="">所有状态</option>
                                    <option value="active" {% if user_status == 'active' %}selected{% endif %}>活跃</option>
                                    <option value="inactive" {% if user_status == 'inactive' %}selected{% endif %}>非活跃</option>
                                    <option value="staff" {% if user_status == 'staff' %}selected{% endif %}>管理员</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary w-100">搜索</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 用户列表 -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">用户列表</h5>
                        <span class="text-muted">共 {{ users.paginator.count }} 个用户</span>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>用户名</th>
                                        <th>邮箱</th>
                                        <th>手机号</th>
                                        <th>注册时间</th>
                                        <th>状态</th>
                                        <th>最后登录</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for user in users %}
                                    <tr>
                                        <td>{{ user.username }}</td>
                                        <td>{{ user.email }}</td>
                                        <td>{{ user.phone|default:"未设置" }}</td>
                                        <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                                        <td>
                                            {% if user.is_staff %}
                                                <span class="badge badge-staff">管理员</span>
                                            {% elif user.is_active and user.account_status == 'active' %}
                                                <span class="badge badge-active">活跃</span>
                                            {% elif user.account_status == 'banned' %}
                                                <span class="badge badge-cancelled">已封禁</span>
                                            {% elif user.account_status == 'deleted' %}
                                                <span class="badge badge-draft">已删除</span>
                                            {% else %}
                                                <span class="badge badge-inactive">非活跃</span>
                                            {% endif %}
                                        </td>
                                        <td>{{ user.last_login|date:"Y-m-d H:i"|default:"从未登录" }}</td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                {% if user.account_status == 'active' %}
                                                    <button type="button" class="btn btn-outline-warning ban-user-btn"
                                                            data-user-id="{{ user.id }}" data-username="{{ user.username }}">
                                                        <i class="bi bi-lock"></i> 封禁
                                                    </button>
                                                {% elif user.account_status == 'banned' %}
                                                    <button type="button" class="btn btn-outline-success unban-user-btn"
                                                            data-user-id="{{ user.id }}" data-username="{{ user.username }}">
                                                        <i class="bi bi-unlock"></i> 解封
                                                    </button>
                                                {% endif %}

                                                {% if user.account_status != 'deleted' and not user.is_staff %}
                                                    <button type="button" class="btn btn-outline-danger delete-user-btn"
                                                            data-user-id="{{ user.id }}" data-username="{{ user.username }}">
                                                        <i class="bi bi-trash"></i> 删除
                                                    </button>
                                                {% endif %}
                                            </div>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="7" class="text-center">暂无用户</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        {% if users.has_other_pages %}
                        <div class="pagination-container">
                            <nav>
                                <ul class="pagination">
                                    {% if users.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?tab=users&user_page={{ users.previous_page_number }}{% if user_search %}&user_search={{ user_search }}{% endif %}{% if user_status %}&user_status={{ user_status }}{% endif %}">上一页</a>
                                    </li>
                                    {% endif %}

                                    {% for i in users.paginator.page_range %}
                                    <li class="page-item {% if users.number == i %}active{% endif %}">
                                        <a class="page-link" href="?tab=users&user_page={{ i }}{% if user_search %}&user_search={{ user_search }}{% endif %}{% if user_status %}&user_status={{ user_status }}{% endif %}">{{ i }}</a>
                                    </li>
                                    {% endfor %}

                                    {% if users.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?tab=users&user_page={{ users.next_page_number }}{% if user_search %}&user_search={{ user_search }}{% endif %}{% if user_status %}&user_status={{ user_status }}{% endif %}">下一页</a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- 分类管理 -->
            <div id="categories-section" class="content-section {% if current_tab != 'categories' %}d-none{% endif %}">
                <h2 class="mb-4">分类管理</h2>

                <!-- 添加分类按钮 -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                        <i class="bi bi-plus-circle"></i> 添加分类
                    </button>
                    <span class="text-muted">共 {{ categories|length }} 个分类</span>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">分类列表</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>分类名称</th>
                                                <th>描述</th>
                                                <th>活动数量</th>
                                                <th>状态</th>
                                                <th>创建时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for category in categories %}
                                            <tr>
                                                <td>{{ category.name }}</td>
                                                <td>{{ category.description|default:"无描述" }}</td>
                                                <td>{{ category.activity_set.count }}</td>
                                                <td>
                                                    {% if category.is_active %}
                                                        <span class="badge badge-active">启用</span>
                                                    {% else %}
                                                        <span class="badge badge-inactive">禁用</span>
                                                    {% endif %}
                                                </td>
                                                <td>{{ category.created_at|date:"Y-m-d H:i" }}</td>
                                                <td>
                                                    <div class="btn-group btn-group-sm">
                                                        <button type="button" class="btn btn-outline-primary edit-category-btn"
                                                                data-category-id="{{ category.id }}"
                                                                data-category-name="{{ category.name }}"
                                                                data-category-description="{{ category.description|default:'' }}"
                                                                data-category-is-active="{{ category.is_active|yesno:'true,false' }}">
                                                            <i class="bi bi-pencil"></i> 编辑
                                                        </button>
                                                        <button type="button" class="btn btn-outline-danger delete-category-btn"
                                                                data-category-id="{{ category.id }}"
                                                                data-category-name="{{ category.name }}">
                                                            <i class="bi bi-trash"></i> 删除
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                            {% empty %}
                                            <tr>
                                                <td colspan="6" class="text-center">暂无分类</td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据统计 -->
            <div id="statistics-section" class="content-section {% if current_tab != 'statistics' %}d-none{% endif %}">
                <h2 class="mb-4">数据统计</h2>

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">平台数据概览</h5>
                            </div>
                            <div class="card-body">
                                <div class="row text-center">
                                    <div class="col-md-3">
                                        <div class="stat-card">
                                            <i class="bi bi-people-fill"></i>
                                            <div class="number">{{ total_users }}</div>
                                            <div class="label">总用户数</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-card">
                                            <i class="bi bi-calendar-event"></i>
                                            <div class="number">{{ total_activities }}</div>
                                            <div class="label">总活动数</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-card">
                                            <i class="bi bi-person-check"></i>
                                            <div class="number">{{ total_participations }}</div>
                                            <div class="label">总参与次数</div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="stat-card">
                                            <i class="bi bi-star"></i>
                                            <div class="number">
                                                {% with activity_reviews=ActivityReview.objects.all %}
                                                    {% if activity_reviews %}
                                                        {{ activity_reviews.aggregate.rating__avg|floatformat:1 }}
                                                    {% else %}
                                                        0
                                                    {% endif %}
                                                {% endwith %}
                                            </div>
                                            <div class="label">平均评分</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 活动状态统计 -->
                <div class="row mt-4">
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">活动状态分布</h5>
                            </div>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>状态</th>
                                            <th>数量</th>
                                            <th>比例</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for stat in activity_status_stats %}
                                        <tr>
                                            <td>
                                                {% if stat.status == 'published' %}已发布
                                                {% elif stat.status == 'draft' %}草稿
                                                {% elif stat.status == 'cancelled' %}已取消
                                                {% elif stat.status == 'completed' %}已完成
                                                {% elif stat.status == 'pending' %}待审核
                                                {% else %}{{ stat.status }}{% endif %}
                                            </td>
                                            <td>{{ stat.count }}</td>
                                            <td>{{ stat.count|divisibleby:total_activities|floatformat:1 }}%</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">活跃用户</h5>
                            </div>
                            <div class="card-body">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>用户名</th>
                                            <th>组织活动数</th>
                                            <th>邮箱</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for user in active_users %}
                                        <tr>
                                            <td>{{ user.username }}</td>
                                            <td>{{ user.activity_count }}</td>
                                            <td>{{ user.email }}</td>
                                        </tr>
                                        {% empty %}
                                        <tr>
                                            <td colspan="3" class="text-center">暂无活跃用户</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加分类模态框 -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">添加分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCategoryForm">
                        <div class="mb-3">
                            <label for="categoryName" class="form-label">分类名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="categoryName" name="name" required maxlength="50" placeholder="请输入分类名称">
                        </div>
                        <div class="mb-3">
                            <label for="categoryDescription" class="form-label">分类描述</label>
                            <textarea class="form-control" id="categoryDescription" name="description" rows="3" placeholder="请输入分类描述（可选）"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="categoryIcon" class="form-label">图标</label>
                            <input type="text" class="form-control" id="categoryIcon" name="icon" placeholder="请输入图标名称（可选）">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="categoryIsActive" name="is_active" checked>
                            <label class="form-check-label" for="categoryIsActive">启用分类</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmAddCategoryBtn">添加分类</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看违规详情模态框 -->
<div class="modal fade" id="viewViolationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">违规言论详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>举报人:</strong> <span id="viewReporter"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>被举报用户:</strong> <span id="viewReportedUser"></span>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>举报类型:</strong> <span id="viewReportType"></span>
                    </div>
                    <div class="col-md-6">
                        <strong>举报时间:</strong> <span id="viewReportTime"></span>
                    </div>
                </div>
                <div class="mb-3">
                    <strong>违规内容:</strong>
                    <div class="border p-3 mt-1 bg-light" id="viewContent"></div>
                </div>
                <div class="mb-3">
                    <strong>举报理由:</strong>
                    <div class="border p-3 mt-1 bg-light" id="viewReason"></div>
                </div>
                <div class="mb-3" id="screenshotsSection" style="display: none;">
                    <strong>截图证据:</strong>
                    <div class="mt-2" id="viewScreenshots"></div>
                </div>
                <input type="hidden" id="viewViolationId">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <div id="violationActionButtons">
                    <!-- 操作按钮将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 处理违规模态框 -->
<div class="modal fade" id="processViolationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="processModalTitle">处理违规举报</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="processViolationForm">
                    <input type="hidden" id="processViolationId" name="violation_id">
                    <input type="hidden" id="processAction" name="action">
                    <div class="mb-3">
                        <label for="adminNotes" class="form-label">处理备注</label>
                        <textarea class="form-control" id="adminNotes" name="admin_notes" rows="3" placeholder="请输入处理备注..."></textarea>
                    </div>
                    <div class="mb-3" id="banOptions" style="display: none;">
                        <label for="banDays" class="form-label">封禁天数</label>
                        <input type="number" class="form-control" id="banDays" name="ban_days" value="1" min="1" max="365">
                        <div class="form-text">选择封禁该用户的天数</div>
                    </div>
                    <div class="mb-3">
                        <label for="actionMessage" class="form-label">发送给用户的消息</label>
                        <textarea class="form-control" id="actionMessage" name="action_message" rows="3" placeholder="将发送给用户的消息内容..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmProcessBtn">确认处理</button>
            </div>
        </div>
    </div>
</div>


    <!-- 编辑分类模态框 -->
    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">编辑分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editCategoryForm">
                        <input type="hidden" id="editCategoryId" name="category_id">
                        <div class="mb-3">
                            <label for="editCategoryName" class="form-label">分类名称 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="editCategoryName" name="name" required maxlength="50">
                        </div>
                        <div class="mb-3">
                            <label for="editCategoryDescription" class="form-label">分类描述</label>
                            <textarea class="form-control" id="editCategoryDescription" name="description" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="editCategoryIcon" class="form-label">图标</label>
                            <input type="text" class="form-control" id="editCategoryIcon" name="icon">
                        </div>
                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="editCategoryIsActive" name="is_active">
                            <label class="form-check-label" for="editCategoryIsActive">启用分类</label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmEditCategoryBtn">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除分类确认模态框 -->
    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>警告：此操作不可逆！</strong>
                    </div>
                    <p>确定要删除分类 <strong id="deleteCategoryName"></strong> 吗？</p>
                    <p class="text-muted">如果该分类下有活动，则无法删除。</p>
                    <input type="hidden" id="deleteCategoryId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteCategoryBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>


    <!-- 封禁用户模态框 -->
    <div class="modal fade" id="banUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">封禁用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="banUserForm">
                        <input type="hidden" id="banUserId" name="user_id">
                        <div class="mb-3">
                            <label for="banUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="banUsername" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="banDays" class="form-label">封禁天数</label>
                            <input type="number" class="form-control" id="banDays" name="days" value="7" min="1" max="365">
                        </div>
                        <div class="mb-3">
                            <label for="banReason" class="form-label">封禁原因</label>
                            <textarea class="form-control" id="banReason" name="reason" rows="3" placeholder="请输入封禁原因...">违反社区规定</textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-warning" id="confirmBanBtn">确认封禁</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 解封用户确认模态框 -->
    <div class="modal fade" id="unbanUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">解封用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要解封用户 <strong id="unbanUsername"></strong> 吗？</p>
                    <input type="hidden" id="unbanUserId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="confirmUnbanBtn">确认解封</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除用户确认模态框 -->
    <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>警告：此操作不可逆！</strong>
                    </div>
                    <p>确定要删除用户 <strong id="deleteUsername"></strong> 吗？</p>
                    <p class="text-muted">用户将被标记为已删除，无法再登录系统。</p>
                    <input type="hidden" id="deleteUserId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批准活动确认模态框 -->
    <div class="modal fade" id="approveActivityModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">批准活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>确定要批准活动 <strong id="approveActivityTitle"></strong> 吗？</p>
                    <input type="hidden" id="approveActivityId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" id="confirmApproveBtn">确认批准</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 拒绝活动模态框 -->
    <div class="modal fade" id="rejectActivityModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">拒绝活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="rejectActivityForm">
                        <input type="hidden" id="rejectActivityId" name="activity_id">
                        <div class="mb-3">
                            <label for="rejectActivityTitle" class="form-label">活动标题</label>
                            <input type="text" class="form-control" id="rejectActivityTitle" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="rejectReason" class="form-label">拒绝原因</label>
                            <textarea class="form-control" id="rejectReason" name="reason" rows="3" placeholder="请输入拒绝原因...">活动内容不符合社区规范</textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-warning" id="confirmRejectBtn">确认拒绝</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除活动确认模态框 -->
    <div class="modal fade" id="deleteActivityModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除活动</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle"></i>
                        <strong>警告：此操作不可逆！</strong>
                    </div>
                    <p>确定要删除活动 <strong id="deleteActivityTitle"></strong> 吗？</p>
                    <p class="text-muted">活动将被永久删除，所有参与记录也会被清除。</p>
                    <input type="hidden" id="deleteActivityId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteActivityBtn">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 简化的 JavaScript - 只保留必要的功能
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏切换
            const sidebarCollapse = document.getElementById('sidebarCollapse');
            if (sidebarCollapse) {
                sidebarCollapse.addEventListener('click', function() {
                    const sidebar = document.getElementById('sidebar');
                    const content = document.getElementById('content');

                    if (sidebar.style.width === '80px' || sidebar.style.width === '') {
                        sidebar.style.width = '250px';
                        content.style.width = 'calc(100% - 250px)';
                        content.style.marginLeft = '250px';
                    } else {
                        sidebar.style.width = '80px';
                        content.style.width = 'calc(100% - 80px)';
                        content.style.marginLeft = '80px';
                    }
                });
            }

            // 用户管理操作
            // 封禁用户
            document.addEventListener('click', function(e) {
                if (e.target.closest('.ban-user-btn')) {
                    const button = e.target.closest('.ban-user-btn');
                    const userId = button.dataset.userId;
                    const username = button.dataset.username;

                    document.getElementById('banUserId').value = userId;
                    document.getElementById('banUsername').value = username;

                    const modal = new bootstrap.Modal(document.getElementById('banUserModal'));
                    modal.show();
                }

                // 解封用户
                if (e.target.closest('.unban-user-btn')) {
                    const button = e.target.closest('.unban-user-btn');
                    const userId = button.dataset.userId;
                    const username = button.dataset.username;

                    document.getElementById('unbanUserId').value = userId;
                    document.getElementById('unbanUsername').textContent = username;

                    const modal = new bootstrap.Modal(document.getElementById('unbanUserModal'));
                    modal.show();
                }

                // 删除用户
                if (e.target.closest('.delete-user-btn')) {
                    const button = e.target.closest('.delete-user-btn');
                    const userId = button.dataset.userId;
                    const username = button.dataset.username;

                    document.getElementById('deleteUserId').value = userId;
                    document.getElementById('deleteUsername').textContent = username;

                    const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
                    modal.show();
                }

                // 批准活动
                if (e.target.closest('.approve-activity-btn')) {
                    const button = e.target.closest('.approve-activity-btn');
                    const activityId = button.dataset.activityId;
                    const title = button.dataset.title;

                    document.getElementById('approveActivityId').value = activityId;
                    document.getElementById('approveActivityTitle').textContent = title;

                    const modal = new bootstrap.Modal(document.getElementById('approveActivityModal'));
                    modal.show();
                }

                // 拒绝活动
                if (e.target.closest('.reject-activity-btn')) {
                    const button = e.target.closest('.reject-activity-btn');
                    const activityId = button.dataset.activityId;
                    const title = button.dataset.title;

                    document.getElementById('rejectActivityId').value = activityId;
                    document.getElementById('rejectActivityTitle').value = title;

                    const modal = new bootstrap.Modal(document.getElementById('rejectActivityModal'));
                    modal.show();
                }

                // 删除活动
                if (e.target.closest('.delete-activity-btn')) {
                    const button = e.target.closest('.delete-activity-btn');
                    const activityId = button.dataset.activityId;
                    const title = button.dataset.title;

                    document.getElementById('deleteActivityId').value = activityId;
                    document.getElementById('deleteActivityTitle').textContent = title;

                    const modal = new bootstrap.Modal(document.getElementById('deleteActivityModal'));
                    modal.show();
                }
            });

            // 确认封禁按钮
            document.getElementById('confirmBanBtn').addEventListener('click', function() {
                const userId = document.getElementById('banUserId').value;
                const days = document.getElementById('banDays').value;
                const reason = document.getElementById('banReason').value;

                if (!days || !reason) {
                    alert('请填写封禁天数和原因');
                    return;
                }

                banUser(userId, parseInt(days), reason);
                bootstrap.Modal.getInstance(document.getElementById('banUserModal')).hide();
            });

            // 确认解封按钮
            document.getElementById('confirmUnbanBtn').addEventListener('click', function() {
                const userId = document.getElementById('unbanUserId').value;
                unbanUser(userId);
                bootstrap.Modal.getInstance(document.getElementById('unbanUserModal')).hide();
            });

            // 确认删除按钮
            document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
                const userId = document.getElementById('deleteUserId').value;
                deleteUser(userId);
                bootstrap.Modal.getInstance(document.getElementById('deleteUserModal')).hide();
            });

            // 确认批准按钮
            document.getElementById('confirmApproveBtn').addEventListener('click', function() {
                const activityId = document.getElementById('approveActivityId').value;
                approveActivity(activityId);
                bootstrap.Modal.getInstance(document.getElementById('approveActivityModal')).hide();
            });

            // 确认拒绝按钮
            document.getElementById('confirmRejectBtn').addEventListener('click', function() {
                const activityId = document.getElementById('rejectActivityId').value;
                const reason = document.getElementById('rejectReason').value;

                if (!reason) {
                    alert('请填写拒绝原因');
                    return;
                }

                rejectActivity(activityId, reason);
                bootstrap.Modal.getInstance(document.getElementById('rejectActivityModal')).hide();
            });

            // 确认删除活动按钮
            document.getElementById('confirmDeleteActivityBtn').addEventListener('click', function() {
                const activityId = document.getElementById('deleteActivityId').value;
                deleteActivity(activityId);
                bootstrap.Modal.getInstance(document.getElementById('deleteActivityModal')).hide();
            });
        });

        function banUser(userId, days, reason) {
            // 修正URL路径 - 使用正确的路径
            fetch(`/user/admin/ban_user/${userId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `days=${days}&reason=${encodeURIComponent(reason)}`
            })
            .then(response => {
                // 检查响应类型
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function unbanUser(userId) {
            fetch(`/user/admin/unban_user/${userId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function deleteUser(userId) {
            fetch(`/user/admin/delete_user/${userId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        // 活动管理函数
        function approveActivity(activityId) {
            fetch(`/user/admin/approve_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function rejectActivity(activityId, reason) {
            fetch(`/user/admin/reject_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `reason=${encodeURIComponent(reason)}`
            })
            .then(response => {
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function deleteActivity(activityId) {
            fetch(`/user/admin/delete_activity/${activityId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    return response.text().then(text => {
                        throw new Error('服务器返回了非JSON响应');
                    });
                }
            })
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        // 获取CSRF token的辅助函数
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        // 分类管理相关的事件监听
        document.addEventListener('click', function(e) {
            // 编辑分类按钮
            if (e.target.closest('.edit-category-btn')) {
                const button = e.target.closest('.edit-category-btn');
                const categoryId = button.dataset.categoryId;
                const categoryName = button.dataset.categoryName;
                const categoryDescription = button.dataset.categoryDescription;
                const categoryIsActive = button.dataset.categoryIsActive === 'true';

                document.getElementById('editCategoryId').value = categoryId;
                document.getElementById('editCategoryName').value = categoryName;
                document.getElementById('editCategoryDescription').value = categoryDescription;
                document.getElementById('editCategoryIcon').value = ''; // 可以根据需要添加图标字段
                document.getElementById('editCategoryIsActive').checked = categoryIsActive;

                const modal = new bootstrap.Modal(document.getElementById('editCategoryModal'));
                modal.show();
            }

            // 删除分类按钮
            if (e.target.closest('.delete-category-btn')) {
                const button = e.target.closest('.delete-category-btn');
                const categoryId = button.dataset.categoryId;
                const categoryName = button.dataset.categoryName;

                document.getElementById('deleteCategoryId').value = categoryId;
                document.getElementById('deleteCategoryName').textContent = categoryName;

                const modal = new bootstrap.Modal(document.getElementById('deleteCategoryModal'));
                modal.show();
            }
        });

        // 确认添加分类按钮
        document.getElementById('confirmAddCategoryBtn').addEventListener('click', function() {
            const name = document.getElementById('categoryName').value.trim();
            const description = document.getElementById('categoryDescription').value.trim();
            const icon = document.getElementById('categoryIcon').value.trim();
            const isActive = document.getElementById('categoryIsActive').checked;

            if (!name) {
                alert('请输入分类名称');
                return;
            }

            addCategory(name, description, icon, isActive);
            bootstrap.Modal.getInstance(document.getElementById('addCategoryModal')).hide();
        });

        // 确认编辑分类按钮
        document.getElementById('confirmEditCategoryBtn').addEventListener('click', function() {
            const categoryId = document.getElementById('editCategoryId').value;
            const name = document.getElementById('editCategoryName').value.trim();
            const description = document.getElementById('editCategoryDescription').value.trim();
            const icon = document.getElementById('editCategoryIcon').value.trim();
            const isActive = document.getElementById('editCategoryIsActive').checked;

            if (!name) {
                alert('请输入分类名称');
                return;
            }

            editCategory(categoryId, name, description, icon, isActive);
            bootstrap.Modal.getInstance(document.getElementById('editCategoryModal')).hide();
        });

        // 确认删除分类按钮
        document.getElementById('confirmDeleteCategoryBtn').addEventListener('click', function() {
            const categoryId = document.getElementById('deleteCategoryId').value;
            deleteCategory(categoryId);
            bootstrap.Modal.getInstance(document.getElementById('deleteCategoryModal')).hide();
        });

        // 分类管理函数
        function addCategory(name, description, icon, isActive) {
            fetch(`/user/admin/add_category/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `name=${encodeURIComponent(name)}&description=${encodeURIComponent(description)}&icon=${encodeURIComponent(icon)}&is_active=${isActive}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function editCategory(categoryId, name, description, icon, isActive) {
            fetch(`/user/admin/edit_category/${categoryId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: `name=${encodeURIComponent(name)}&description=${encodeURIComponent(description)}&icon=${encodeURIComponent(icon)}&is_active=${isActive}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        function deleteCategory(categoryId) {
            fetch(`/user/admin/delete_category/${categoryId}/`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(data.message);
                    location.reload();
                } else {
                    alert('操作失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败: ' + error.message);
            });
        }

        // 违规言论管理相关的事件监听
        document.addEventListener('click', function(e) {
            // 查看违规详情
            if (e.target.closest('.view-violation-btn')) {
                const button = e.target.closest('.view-violation-btn');
                const violationId = button.dataset.violationId;
                viewViolationDetail(violationId);
            }

            // 确认违规
            if (e.target.closest('.approve-violation-btn')) {
                const button = e.target.closest('.approve-violation-btn');
                const violationId = button.dataset.violationId;
                showProcessModal(violationId, 'approve');
            }

            // 举报无效
            if (e.target.closest('.reject-violation-btn')) {
                const button = e.target.closest('.reject-violation-btn');
                const violationId = button.dataset.violationId;
                showProcessModal(violationId, 'reject');
            }
        });

        // 查看违规详情
        function viewViolationDetail(violationId) {
            fetch(`/user/admin/get_violation_detail/${violationId}/`, {
                method: 'GET',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken'),
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const violation = data.violation;

                    // 填充模态框内容
                    document.getElementById('viewReporter').textContent = violation.reporter;
                    document.getElementById('viewReportedUser').textContent = violation.reported_user;
                    document.getElementById('viewReportType').textContent = violation.report_type_display;
                    document.getElementById('viewReportTime').textContent = violation.created_at;
                    document.getElementById('viewContent').textContent = violation.content;
                    document.getElementById('viewReason').textContent = violation.reason;
                    document.getElementById('viewViolationId').value = violationId;

                    // 处理截图
                    const screenshotsSection = document.getElementById('screenshotsSection');
                    const screenshotsContainer = document.getElementById('viewScreenshots');
                    if (violation.screenshots && violation.screenshots.length > 0) {
                        screenshotsSection.style.display = 'block';
                        screenshotsContainer.innerHTML = violation.screenshots.map(url =>
                            `<a href="${url}" target="_blank"><img src="${url}" class="img-thumbnail me-2 mb-2" style="max-height: 100px;"></a>`
                        ).join('');
                    } else {
                        screenshotsSection.style.display = 'none';
                    }

                    // 动态添加操作按钮
                    const actionButtons = document.getElementById('violationActionButtons');
                    if (violation.status === 'pending') {
                        actionButtons.innerHTML = `
                            <button type="button" class="btn btn-success" onclick="showProcessModal('${violationId}', 'approve')">确认违规</button>
                            <button type="button" class="btn btn-warning" onclick="showProcessModal('${violationId}', 'reject')">举报无效</button>
                        `;
                    } else {
                        actionButtons.innerHTML = '';
                    }

                    const modal = new bootstrap.Modal(document.getElementById('viewViolationModal'));
                    modal.show();
                } else {
                    alert('获取详情失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('获取详情失败');
            });
        }

        // 显示处理模态框
function showProcessModal(violationId, action) {
    document.getElementById('processViolationId').value = violationId;
    document.getElementById('processAction').value = action;

    const modalTitle = document.getElementById('processModalTitle');
    const banOptions = document.getElementById('banOptions');
    const actionMessage = document.getElementById('actionMessage');

    if (action === 'approve') {
        modalTitle.textContent = '确认违规';
        banOptions.style.display = 'block';
        actionMessage.value = '您的言论违反了社区规定，已被确认违规。请遵守社区规范，共同维护良好的交流环境。';
    } else {
        modalTitle.textContent = '标记为无效举报';
        banOptions.style.display = 'none';
        actionMessage.value = '您举报的内容经审核未发现违规，感谢您对社区环境的关注。';
    }

    // 清空之前的备注
    document.getElementById('adminNotes').value = '';

    const modal = new bootstrap.Modal(document.getElementById('processViolationModal'));
    modal.show();
}

// 确认处理违规
document.getElementById('confirmProcessBtn').addEventListener('click', function() {
    const violationId = document.getElementById('processViolationId').value;
    const action = document.getElementById('processAction').value;
    const adminNotes = document.getElementById('adminNotes').value;
    const actionMessage = document.getElementById('actionMessage').value;
    const banDays = action === 'approve' ? document.getElementById('banDays').value : 0;

    if (!actionMessage.trim()) {
        alert('请输入发送给用户的消息');
        return;
    }

    processViolation(violationId, action, adminNotes, actionMessage, parseInt(banDays));
    bootstrap.Modal.getInstance(document.getElementById('processViolationModal')).hide();
});

// 处理违规举报
function processViolation(violationId, action, adminNotes, actionMessage, banDays) {
    fetch(`/user/admin/process_violation/${violationId}/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': getCookie('csrftoken'),
            'X-Requested-With': 'XMLHttpRequest'
        },
        body: `action=${action}&admin_notes=${encodeURIComponent(adminNotes)}&action_message=${encodeURIComponent(actionMessage)}&ban_days=${banDays}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('处理失败: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('处理失败');
    });
}
    </script>
</body>
</html>